<template>
  <div class="container-grid">
    <div class="header-search-el box-row box-center-end">
      <el-button
          @click="onAddClick"
          v-if="permissionsData.add"
          class="btn-blue"
          icon="el-icon-plus"
      >
          新增
      </el-button>
  </div>
    <vxe-grid ref="xTree" row-id="agent_sn" v-bind="tableConfig" :data="dataStore.data" :columns="table.columns">
      <template v-slot:operate="{ row }">
        <ux-btn-group :btns="table.btns" :data="{ row, permissionsData }"></ux-btn-group>
      </template>
    </vxe-grid>
    <dialogForm ref="dialogForm" @submitSuccess="onSubmitSuccess" @closeDialog="onCloseDialog"></dialogForm>
    <authForm ref="authForm" @submitSuccess="onSubmitSuccess" @closeDialog="onCloseDialog"></authForm>
    <repwdForm ref="repwdForm" @submitSuccess="onSubmitSuccess" @closeDialog="onCloseDialog"></repwdForm>
    <yardQrForm ref="yardQrForm" @submitSuccess="onSubmitSuccess" @closeDialog="onCloseDialog"></yardQrForm>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Getter } from "vuex-class";
import { mixinTableTreeStore } from "@/mixin/table/TreeStore";
import { mixinAccess } from "@/mixin/Access";
import { mixinTableOperation } from "@/mixin/table/Operation";
import { mixinDialogFormParent } from "@/mixin/dialog/FormParent";
import dialogForm from "./Edit.vue";
import authForm from "./Auth.vue";
import repwdForm from "./RePwd.vue";
import yardQrForm from "./YardQr.vue";
@Component({
  name: "agentTable",
  mixins: [mixinTableTreeStore, mixinAccess, mixinDialogFormParent, mixinTableOperation],
  components: {
    dialogForm,
    authForm,
    repwdForm,
    yardQrForm
  }
})
export default class agentTable extends Vue {
  @Action("purviewAgent/all") getTree: any;
  @Action("purviewAgent/del") itemDel: any;
  @Getter("purviewAgent/all") treeData: any;
  treeQueryConfig: object = {
    id: "agent_sn"
  };
  // 列表配置
  table: any = {
    btns: [
      {
        label: '权限',
        param: 'authForm',
        condition: [
          'permissionsData.auth'
      ],
        handleClick: (this as any).onEditClick
      },
      {
        label: "编辑",
        condition: [
          "permissionsData.edit"
        ],
        handleClick: (this as any).onEditClick
      },
      {
        label: "重置密码",
        param: 'repwdForm',
        condition: [
          "permissionsData.repwd"
        ],
        handleClick: (this as any).onEditClick
      },
      {
        label: "园区二维码",
        param: 'yardQrForm',
        handleClick: (this as any).onEditClick
      },
      {
        label: "删除",
        condition: [
          "permissionsData.del"
        ],
        enabledCondition: [
          function ({ row }) {
            return row.yard_count == 0 && row.has_child == 2;
          }],
        handleClick: (this as any).onDelClick
      }
    ],
    // 字段配置
    columns: [
      {
        field: "agent_name",
        title: "代理商名称",
        treeNode: true,
        align: "left",
        minWidth: 150
      },
      {
        field: "phone",
        title: "帐号",
        align: "left",
        minWidth: 150
      },
      {
        field: "yard_count",
        title: "园区数量",
        align: "left",
        minWidth: 150
      },
      {
        field: "agent_lxr",
        title: "联系人",
        align: "left",
        minWidth: 150
      },
      {
        field: "agent_tel",
        title: "联系电话",
        align: "left",
        minWidth: 150
      },
      {
        showOverflow: "ellipsis",
        fixed: "right",
        title: "操作",
        slots: { default: "operate" },
        width: 320
      }
    ]
  };
  onAddChildrenClick({ row }) {
    const me = this as any;
    me.setDialogValue("selectItem", row);
    me.onAddClick();
  }
}
</script>
